.my_masonry_grid {
  display: -webkit-box;
  /* Not needed if autoprefixing */
  display: -ms-flexbox;
  /* Not needed if autoprefixing */
  display: flex;
  margin-left: -30px;
  /* gutter size offset */
  width: auto;
}

.my_masonry_grid_column {
  padding-left: 30px;
  /* gutter size */
  background-clip: padding-box;
}

.ellipsis {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  max-width: 100%;
  /* 最大宽度，根据需要设置 */
}


.card_container {
  height: max-content;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 设置列宽，自动换行 */
  gap: 10px;
  /* 可选，设置卡片之间的间距 */
}



//数字卡片效果 02
.dcardsec {
  background-color: var(--color-bg-200);
  display: flex;
  flex-flow: row nowrap;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid var(--color-bg-6);
  position: relative;

  .tag-right-top {
    position: absolute;
    top: 4px;
    right: -3px;
  }

  .main {
    width: 80%;


    .head {
      overflow: hidden;
      color: var(--color-text-85);
      font-weight: 500;
      font-size: 16px;
      white-space: nowrap;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .body {
      color: var(--color-text-45);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;

      .suffix {
        // font-size: 24px;
      }
    }
  }



  .icon {
    width: 20%;
    padding-top: 20px;
    align-self: center;
    flex: 1;
    text-align: right;
    font-size: 16px;
    color: var(--color-text-45);
  }

  .icon:hover {
    color: var(--custom-primary-color-hover);
  }
}